<template>
  <div class="flow-root">
    <div class="row-item" v-for="(item,index) in dataList" :key="index">
      <div class="decorate">
        <div class="decorate-item">
          <div :class="index != 0  ? ['line','first'] : ['line','hidden','first']"></div>
          <div class="point"></div>
          <div :class="index != dataList.length - 1  ? ['line','last'] : ['line','first','hidden']"></div>
        </div>
      </div>
      <div class="content-container">
        <div class="txt-row-container">
          <div v-for="(keyItem,keyIndex) in txtConfig" class="txt-row" :key="`${index}_${keyIndex}`">
            <div class="label">
              {{ keyItem.label }}
            </div>
            <div class="value">
              {{ item[keyItem.value] }}
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
      }
    },
    txtConfig: {
      type: Array,
      default: () => {
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-root {
  display: flex;
  flex-direction: column;
  height: max-content;

  .row-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;

    .decorate {
      width: 50px;
      position: relative;
      display: flex;
      justify-content: center;

      .decorate-item {
        width: 1px;
        height: 100%;
        position: relative;

        .line {
          width: 100%;
          border-left: 2px dashed rgba(220, 223, 230, 1);

          &.first {
            height: 20px;
          }

          &.last {
            height: calc(100% - 30px);
          }

          &.hidden {
            visibility: hidden;
          }
        }

        .point {
          width: 10px;
          height: 10px;
          position: relative;
          left: -4px;
          border-radius: 50%;
          background: rgba(18, 190, 80, 1);
        }

      }
    }

    .content-container {
      box-sizing: border-box;
      padding: 0 40px 20px 0;
      width: calc(100% - 50px);

      .txt-row-container {
        display: flex;
        flex-direction: column;
        padding: 5px;
        background: rgba(249, 249, 249, 1);

        .txt-row {
          width: 100%;
          display: flex;
          justify-content: stretch;

          .label, .value {
            box-sizing: border-box;
            padding: 5px;
            display: flex;
          }

          .label{
            justify-content: flex-end;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(144, 147, 153, 1);
            width: 100px;
            margin-right: 20px;
          }

          .value{
            justify-content: flex-start;

            width: calc(100% - 120px);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 18px;
            color: rgba(48, 49, 51, 1);
          }
        }
      }
    }
  }

}
</style>
